<template>
  <div>
    <base-panel>
      <top-simple-search @addFun="editCategory"></top-simple-search>
      <el-table
        :data="categoryList"
        class="full-width"
        default-expand-all
        row-key="id"
        v-loading="loading"
        :tree-props="{ children: 'children' }"
      >

        <el-table-column align="left" prop="name" label="标题"/>
<!--        <el-table-column-->
<!--          align="left"-->
<!--          prop="no_order"-->
<!--          label="排序"-->
<!--          v-if="showParent"-->
<!--          width="100"-->
<!--        />-->
        <el-table-column align="left" prop="foldername" label="文件夹" width="200"/>
        <el-table-column align="left" prop="status" label="是否显示" width="100">
          <template slot-scope="{ row }">
            <span v-if="row.status">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column
          align="left"
          prop="com_ok"
          label="是否首页推荐"
          v-if="showParent"
          width="120"
        >
          <template slot-scope="{ row }">
            <span v-if="row.com_ok">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column align="left" fixed="right" label="操作" width="120">
          <template slot-scope="{ row }">
            <edit-button @click="editCategory(row)"></edit-button>
            <delete-button @click="deleteCategory(row)"></delete-button>
          </template>
        </el-table-column>
      </el-table>
    </base-panel>
    <category-edit-dialog
      :visible.sync="visible"
      v-if="visible"
      :categoryList="categoryList"
      @reloadList="getCategoryList"
      :row="currRow"
    ></category-edit-dialog>
  </div>
</template>

<script>
import news from "@/api/news/index";
import CategoryEditDialog from "./dialog/categoryEditDialog";
import XEUtils from 'xe-utils'
export default {
  name: "categoryList",
  components: { CategoryEditDialog },
  data() {
    return {
      categoryList: [],
      count: 0,
      page: 1,
      page_num: 10,
      total: 0,
      per_page: 10,
      visible: false,
      currRow: {},
      loading: false,
      path: this.$route.fullPath
    };
  },
  created() {
    this.getCategoryList();
  },
  computed: {
    showParent() {
      return !(this.isRepair);
    },
    interface() {
      return news;
    }
  },
  watch: {},
  methods: {
    getCategoryList() {
      this.loading = true;
      this.interface.getCategoryList({ page: 1, per_page: 1000 }).then(res => {
          let list = this.isRepair || this.isService
                  ?res.data : res.data.value;
          this.categoryList = XEUtils.toArrayTree(list,{strict: true, parentKey: 'parent', key: 'id', children: 'children'});
        this.loading = false;
      }).catch(()=>{
        this.loading = false;
      });
    },
    editCategory(row) {
      this.currRow = row;
      this.visible = true;
    },
    deleteCategory(row) {
      if(row.children){
        this.$message.error('请先删除下面的分类')
      }else {
        this.$confirm("删除该栏目, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.interface.deleteCategory(row.id).then(res => {
              this.msgSuccess("删除成功!");
              this.getCategoryList();
          });
        });
      }

    }
  }
};
</script>
